<template>
	<view class="box">
		<Title name="创建社团"></Title>
		<view class="content">
			<input type="text" value="" placeholder="请输入社团名称" class="item" v-model="name" />
			<view class="avater" @click="up">
				{{show}}
			</view>
		</view>
		<view class="create" @click="build">
			<text>创建</text>
		</view>
	</view>
	
</template>

<script>
	import Title from "../components/title.vue"
	export default {
		components: {
			Title
		},
		data () {
			return {
				name: "",
				show: "上传头像",
				img: ""
			}
		},
		methods: {
			async up () {
				let that = this
				uni.chooseImage({
				    count: 1,
				    async success(res) {
				        if (res.tempFilePaths.length > 0) {
				            let filePath = res.tempFilePaths[0]
				            //进行上传操作
							that.show = "上传中..."
							uni.uploadFile({
								url: that.$config.basisIP,
								filePath,
								name: "img",
								formData: {
									fun: "user_upload_img"
								},
								success (res) {
									res = JSON.parse(res.data)
									if (res.code === 200) {
										that.show = "上传成功"
										that.img = res.result.pur_img
									}
								}
							})
				        }
				    }
				});
			},
			async build () {
				let res = await uni.request({
					url: this.$config.basisIP,
					method: "POST",
					data: {
						fun: "create_association",
						create_people: "test",
						president: "test",
						name: this.name,
						avatar: this.img
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					}
				})
				
				res = res[1].data
				
				uni.showToast({
					title: res.result,
					image: "../../static/img/tubiao8-.png"
				})
				
				if (res.code === 200) {
					setTimeout(function () {
						uni.navigateTo({
							url: `../index/itemi?pro_id=${res.result.pro_id}`
						})
					}, 1500)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-height: 100vh;
		background-color: #fff;
		
		.content {
			box-sizing: border-box;
			width: 645rpx;
			height: 263rpx;
			border-radius: 10rpx;
			box-shadow: 5px 5px 30px 0px rgba(225, 227, 230, 1);
			margin: 40rpx auto;
			font-size: 25rpx;
			padding: 30rpx 20rpx;
			
			.item {
				margin-top: 30rpx;
				box-sizing: border-box;
				width: 545rpx;
				height: 54rpx;
				border: 1px solid $yellow;
				padding: 5rpx 10 rpx;
			}
			
			.avater {
				margin-top: 50rpx;
				width: 141rpx;
				height: 63rpx;
				line-height: 63rpx;
				border-radius: 90rpx;
				background-color: $yellow;
				color: #fff;
				text-align: center;
			}
		}
		
		.create {
			position: absolute;
			margin: 0 auto;
			left: 0;
			right: 0;
			bottom: 50rpx;
			width: 645rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-color: $yellow;
			color: #fff;
			border-radius: 90rpx;
			text-align: center;
		}
	}
</style>